<template>
  <div>
    <h2>----------HelloMutations组件的内容----------</h2>
    <button @click="updataInfo('娃哈哈')">修改信息</button>
    <br><br>
    <button @click="addPropOne">添加属性（不能做到响应式）</button>
    <button @click="addPropTwo">响应式的添加属性</button>
    <br><br>
    <button @click="delAgeProp">不能响应式删除age属性</button>
    <button @click="delAgePropTwo">响应式删除age属性</button>



    <h3>{{$store.state.info}}</h3>
  </div>
</template>

<script>
import { UPDATAINFO, ADDPROPONE, ADDPROPTWO, DELAGEPROP, DELAGEPROPTWO } from '../store/mutations-types'

export default {
  name:'HelloMutations',
  methods:{
    updataInfo(newName){
      this.$store.commit({
        type: UPDATAINFO,
        name: newName,
      });
    },
    addPropOne(){
      this.$store.commit(ADDPROPONE);
    },
    addPropTwo(){
      this.$store.commit(ADDPROPTWO);
    },
    delAgeProp(){
      this.$store.commit(DELAGEPROP);
    },
    delAgePropTwo(){
       this.$store.commit(DELAGEPROPTWO);
    },
  },
}
</script>

<style>

</style>